import { useState, useMemo, useEffect } from 'react';
import { Checkbox, Radio, Space } from 'antd';
import PopoverComponent from './PopoverComponent';
import MultilingualInput from '../../.././../../MultilingualInput';
import '../style.less';

export default function Withdraw(props) {
    const { value, onChange, form } = props;
    const [popoverVisible, setPopoverVisible] = useState(false);
    const [radioValue, setRadioValue] = useState();

    const buttonItem = useMemo(() => {
        return value?.find((item) => item?.action == 'withDraw');
    }, [value]);

    const onCheckChange = (e: { target: { checked: boolean; }; }) => {
        const _value = value?.map((item) => {
            if (item?.action == 'withDraw') {
                return {
                    ...item,
                    enable: e?.target?.checked,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onTextChange = () => {
        const _value = value?.map((item) => {
            if (item?.action == 'withDraw') {
                return {
                    ...item,
                    enable: !buttonItem?.enable,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onRadioChange = (e) => {
        const _value = e?.target?.value;
        const _buttonSetting = form?.getFieldValue('buttonSetting');
        form?.setFieldValue('buttonSetting', {
            ..._buttonSetting,
            withdrawRule: _value,
        });
        setRadioValue(_value);
    };

    const onInputChange = (val: string) => {
        const _value = value?.map((item) => {
            if (item?.action == 'withDraw') {
                return {
                    ...item,
                    name: val,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    useEffect(() => {
        const _values = form?.getFieldsValue();
        setRadioValue(_values?.buttonSetting?.withdrawRule || 'openWithdrawal')
    }, [form?.getFieldsValue()?.buttonSetting?.withdrawRule]);

    return (
        <>
            <div className='process-designer-button-withdraw'>
                <Checkbox checked={buttonItem?.enable} onChange={onCheckChange} />
                <div className='process-designer-button-withdraw-text' onClick={onTextChange} title='撤回'>撤回</div>
                {
                    buttonItem?.enable
                    &&
                    <>
                        <MultilingualInput value={buttonItem?.name} onChange={onInputChange} />
                        <PopoverComponent
                            popoverVisible={popoverVisible}
                            setPopoverVisible={setPopoverVisible}
                            value={value}
                            onChange={onChange}
                            type='withDraw'
                        />
                    </>
                }
            </div>
            {
                buttonItem?.enable
                &&
                <div className='process-designer-button-config'>
                    <Radio.Group value={radioValue} onChange={onRadioChange}>
                        <Space direction="vertical">
                            <Radio value={'openWithdrawal'}>未结束撤回（支持流程未结束时撤回）</Radio>
                            <Radio value={'unapprovedWithdrawal'}>未审批撤回（支持流程未经过审批人审批时撤回）</Radio>
                        </Space>
                    </Radio.Group>
                </div>
            }
        </>
    )
}